<template>
  <div id="app">
    <swipeItem :busLevel="busLevel" :supLevel="supLevel" :guideLevel="guideLevel"></swipeItem>

    <draggable v-model="myArray"  chosenClass="chosen" forceFallback="true" animation="1000" @start="onStart" @end="onEnd">
      <transition-group>
            <div class="item" v-for="(element,index) in myArray" :key="element.id">{{element.name}}
              <div class="sright">商品数:{{element.num}}</div>
              <hr>
              <div class="iright">
                <van-icon name="back-top" color="blue" @click="toTop(index)"/>
                <van-icon name="apps-o" color="blue"/>
              </div>
            </div>
      </transition-group>

    </draggable>
    <div class="btnback">
      <van-button type="info">保存</van-button>
    </div>
  </div>

  
</template>

<script>
import draggable from 'vuedraggable'
import swipeItem from '@/components/swipeItem.vue'
import axios from "axios";
export default {
  name: 'App',
  data(){
    return {
      busLevel:'',
      supLevel:'',
      guideLevel:'',
      drag:false,
      //定义要被拖拽对象的数组
      myArray:[
        {id:10,name:'咕咕',num:2},
        {id:20,name:'兜兜',num:4},
        {id:30,name:'嘟嘟',num:3},
        {id:40,name:'肉肉',num:4},
        {id:50,name:'牛牛',num:7},
        {id:60,name:'兔兔',num:3},
        {id:70,name:'图图',num:1},
        {id:80,name:'瓜瓜',num:5},
      ]
    }
  },
  components: {
    draggable,
    swipeItem
  },
  methods:{
      onStart(){
      this.drag=true;
    },
    //拖拽结束事件
    onEnd() {
      this.drag=false;
    },
    toTop(index){
      const item = this.myArray[index];
      this.myArray.splice(index,1);
      this.myArray.unshift(item);
    }
  },
  
  async mounted(){
    const {data} = await axios.get('/level');
    this.busLevel = data.busLevel;
    this.supLevel = data.supLevel;
    this.guideLevel = data.guideLevel
  }
}
</script>

<style scoped>
html{
  width: 100%;
  height: 100%;
  background-color: #f0f6fa;
}
/*#app{*/
/*  position: relative;*/
/*}*/
/*被拖拽对象的样式*/
.item {
  z-index: 1;
  padding: 6px;
  height: 60px;
  background-color: #fdfdfd;
  border: solid 1px #eee;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 10px 10px;
  cursor: move;
}
/*选中样式*/
.chosen {
  border: solid 1px #3089dc !important;
}

.sright{
  float: right;
}
.iright{
  float: right;
}
.iright .van-icon{
  margin: 0 5px;
}

.btnback{
  position: fixed;
  background: #fff;
  width: 100%;
  height: 100px;
  line-height: 100px;
  bottom: 0;
  text-align: center;
  z-index: 2;
}
</style>
